import React from 'react'

import { useSelector,useDispatch } from 'react-redux'

import TodoItem from "./TodoItem"

import { todoAll } from '../store/actions'

export default function TodoMain() {
    const dispatch = useDispatch()
    //根据底部情况进行筛选
    const {active}=useSelector(state=>state.filters)
    const list =useSelector((state)=>{
      if(active==="active"){
        return state.todo.filter(item=>!item.done)
      }
      else if(active==="complete"){
        return state.todo.filter(item=>item.done)
      }
      else{
        return state.todo
      }
    })

    const handleAll=()=>dispatch(todoAll(!nowStatus))
    const nowStatus=list.every(item=>item.done)
 


    // useEffect(()=>{ //异步操作，刷新之后获取焦点，如不采取这种方案，那么获取焦点先于选中则不可编辑
    //   inputRef.current.focus();
    // },[currentId])
  return (
    <section className="main">
    <input id="toggle-all" className="toggle-all" type="checkbox" checked={nowStatus}  onChange={()=>{handleAll()}}/>
    <label htmlFor="toggle-all">Mark all as complete</label>
    <ul className="todo-list">
      {/* <!-- These are here just to show the structure of the list items --> */}
      {/* <!-- List items should get the className `editing` when editing and `completed` when marked as completed --> */}
      {/* <li className="completed">
        <div className="view">
          <input className="toggle" type="checkbox" checked  onChange={()=>{}}/>
          <label>Taste JavaScript</label>
          <button className="destroy"></button>
        </div>
        <input className="edit" value="Create a TodoMVC template" onChange={()=>{}}/>
      </li> */}

      {/* <li>
        <div className="view">
          <input className="toggle" type="checkbox"/>
          <label>Buy a unicorn</label>
          <button className="destroy"></button>
        </div>
        <input className="edit" value="Rule the web"  onChange={()=>{}}/>
      </li> */}
    {
        list.map(item=>
            <TodoItem item={item} key={item.id}/>
        )
    }

    </ul>
  </section>
  )
}
